<template>
  <view class="list-page">
    <!-- 使用 z-paging 分页组件 -->
    <z-paging ref="paging" v-model="dataList" @query="queryList" :refresher-enabled="true" :loading-more-enabled="true" :empty-view-text="'暂无数据'" :loading-more-loading-text="'加载中...'" :loading-more-no-more-text="'没有更多了'" :refresher-complete-text="'刷新完成'">
      <!-- 列表项 -->
      <view v-for="item in dataList" :key="item.id" class="list-item" @click="handleItemClick(item)">
        <view class="item-content">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-desc">{{ item.description }}</view>
          <view class="item-meta">
            <text class="item-time">{{ item.createTime }}</text>
            <text class="item-status" :class="'status-' + item.status">
              {{ getStatusText(item.status) }}
            </text>
          </view>
        </view>
        <view class="item-arrow">
          <u-icon name="arrow-right" size="16" color="#c0c4cc"></u-icon>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  name: 'ListPage',
  data() {
    return {
      dataList: [],
      loading: false
    };
  },
  onLoad() {
    console.log('列表页面加载');
  },
  methods: {
    // 查询列表数据
    async queryList(pageNo, pageSize) {
      console.log(`查询第${pageNo}页，每页${pageSize}条`);

      try {
        // 模拟 API 请求
        const mockData = await this.getMockData(pageNo, pageSize);

        // 如果是第一页，清空数据
        if (pageNo === 1) {
          this.dataList = mockData;
        } else {
          // 追加数据
          this.dataList = [...this.dataList, ...mockData];
        }

        // 通知 z-paging 请求完成
        this.$refs.paging.complete(mockData);
      } catch (error) {
        console.error('查询列表失败:', error);
        // 通知 z-paging 请求失败
        this.$refs.paging.complete(false);
      }
    },

    // 模拟获取数据
    getMockData(pageNo, pageSize) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const mockData = [];
          const startIndex = (pageNo - 1) * pageSize;

          for (let i = 0; i < pageSize; i++) {
            const index = startIndex + i;
            mockData.push({
              id: index + 1,
              title: `列表项 ${index + 1}`,
              description: `这是第 ${index + 1} 个列表项的详细描述内容，用于展示分页效果`,
              createTime: this.formatTime(new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000)),
              status: Math.floor(Math.random() * 3) + 1 // 1-3 随机状态
            });
          }

          resolve(mockData);
        }, 1000); // 模拟网络延迟
      });
    },

    // 处理列表项点击
    handleItemClick(item) {
      console.log('点击列表项:', item);
      uni.showToast({
        title: `点击了: ${item.title}`,
        icon: 'none'
      });
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '进行中',
        2: '已完成',
        3: '已取消'
      };
      return statusMap[status] || '未知';
    },

    // 格式化时间
    formatTime(date) {
      const now = new Date();
      const diff = now - date;
      const days = Math.floor(diff / (24 * 60 * 60 * 1000));

      if (days === 0) {
        return '今天';
      } else if (days === 1) {
        return '昨天';
      } else if (days < 7) {
        return `${days}天前`;
      } else {
        return date.toLocaleDateString();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.list-page {
  height: 100vh;
  background-color: #f5f5f5;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s;

  &:active {
    background-color: #f8f8f8;
  }

  &:last-child {
    border-bottom: none;
  }
}

.item-content {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-time {
  font-size: 24rpx;
  color: #999;
}

.item-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;

  &.status-1 {
    color: #1890ff;
    background-color: #e6f7ff;
  }

  &.status-2 {
    color: #52c41a;
    background-color: #f6ffed;
  }

  &.status-3 {
    color: #ff4d4f;
    background-color: #fff2f0;
  }
}

.item-arrow {
  margin-left: 16rpx;
  opacity: 0.6;
}
</style>
